<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  value: {
    type: Number,
    required: true
  }
})

const displayValue = ref(props.value)

watch(() => props.value, (newValue) => {
  displayValue.value = newValue
})
</script>

<template>
  <span class="number-transition">{{ displayValue.toFixed(2) }}</span>
</template>

<style scoped>
.number-transition {
  transition: all 1.5s cubic-bezier(0.75, 0, 0.25, 1);
}
</style> 